<template>
  <div>
    <el-dialog
        v-model="centerDialogVisible"
        :title="tilte"
        :width="width"
        :close-on-click-modal="closeOnClickModal"
        :modal="myModal"
        align-center
        :before-close="handleClose"
        class="elDialog"
    >
      <div class="body">
        <slot name="content"></slot>
      </div>
      <template #footer>
      <span class="dialog-footer" v-if="defaultButton">
          <el-button @click="Cancel">取消</el-button>
          <el-button type="primary" @click="Submit">确认</el-button>
      </span>
      <slot name="custom" v-else></slot>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { toRefs, ref } from 'vue'

const handleClose = (done: () => void) => {
  done()
  Cancel()
}

const props = defineProps({
  myModal: {
    type: Boolean,
    default: true
  },
  closeOnClickModal: {
    type: Boolean,
    default: false
  },
  // 弹窗标题
  tilte: {
    type: String,
    default: 'Warning'
  },
  // 弹窗是否显示
  centerDialogVisible: {
    type: Boolean,
    default: false
  },
  // 弹窗宽度
  width: {
    type: String,
    default: '20%'
  },
  // 是否显示默认按钮
  defaultButton: {
    type: Boolean,
    default: true
  }
})

const emit = defineEmits(['Cancel', 'Submit'])

/**
 * 点击取消
 */
const Cancel = () => {
  emit('Cancel')
}
/**
 * 点击提交
 */
const Submit = () => {
  emit('Submit')
}

const { centerDialogVisible, tilte, width } = toRefs(props)

</script>

<style lang="less" scoped>
  :deep(.el-dialog) {
    border-radius: 12px;
    box-shadow: 0 12px 32px 0 rgba(0,0,0,0.08);
  .el-dialog__header {
    padding: 10px 0;
    margin-right: 0;
    text-indent: 24px;
    width: 90%;
    .el-dialog__title {
      font-size: 16px;
      font-family: "HarmonyOS_Sans_SC_Medium";
      color: #353A42;
      height: 16px;
      line-height: 16px;
    }
    .el-dialog__headerbtn {
      width: 36px;
      height: 36px;
      margin-right: 12px;
    }
    .el-dialog__headerbtn .el-dialog__close {
      font-size: 16px;
      font-family: "HarmonyOS_Sans_SC_Medium";
      width: 24px;
      height: 24px;
      color: #353A42;
    }
  }
  .el-dialog__footer {
    text-align: center;
    padding-top: 24px;
    padding-bottom: 24px;
  }
}
</style>
